<template>
  <div class="my-applications">
    <div class="container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>我的领养申请</h1>
        <p>查看您的领养申请状态</p>
      </div>

      <!-- 按状态检索的条件 -->
      <div class="filter-section">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <el-form-item label="申请状态">
            <el-select v-model="filterForm.statusFilter" placeholder="请选择申请状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="审核中" :value="1" />
              <el-option label="待管理员审核" :value="2" />
              <el-option label="已通过" :value="3" />
              <el-option label="初审驳回" :value="4" />
              <el-option label="终审驳回" :value="5" />
            </el-select>
          </el-form-item>
          <el-form-item label="宠物名称">
            <el-input v-model="filterForm.name" placeholder="请输入宠物名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="filterApplications">筛选</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 申请列表 -->
      <div class="applications-list">
        <el-card v-if="loading" class="loading-card">
          <div class="loading-content">
            <i class="el-icon-loading"></i>
            <span>加载中...</span>
          </div>
        </el-card>
        <div v-else-if="applications.length === 0" class="empty-state">
          <i class="el-icon-document-remove"></i>
          <h3>暂无申请记录</h3>
          <p>您还没有提交过领养申请</p>
          <el-button type="primary" @click="$router.push('/adoption-browse')">
            去浏览宠物
          </el-button>
        </div>
        <div v-else>
          <div class="application-card" v-for="application in applications" :key="application.id">
            <div class="pet-info">
              <img :src="application.image" :alt="application.name" class="pet-avatar" />
              <div class="pet-details">
                <h3>{{ application.name }}</h3>
                <p class="pet-type">{{ getTypeText(application.type) }} · {{ getAgeText(application.age) }} · {{
                  getGenderText(application.gender) }}</p>
              </div>
            </div>

            <div class="application-info">
              <div class="status-section">
                <span class="status-label">申请状态：</span>
                <el-tag :type="getStatusType(application.status)" size="medium">
                  {{ getStatusText(application.status) }}
                </el-tag>
              </div>

              <div class="time-info">
                <p><strong>申请时间：</strong>{{ application.createTime }}</p>
                <p v-if="application.reviewTime"><strong>审核时间：</strong>{{ application.reviewTime }}</p>
              </div>

              <div v-if="application.reviewNote" class="review-note">
                <p><strong>审核备注：</strong></p>
                <p class="note-content">{{ application.reviewNote }}</p>
              </div>

              <div class="application-actions">
                <!-- <el-button size="small" @click="viewDetails(application)">
                  查看详情
                </el-button> -->
                <el-button v-if="application.status === 1" type="danger" size="small"
                  @click="cancelApplication(application)">
                  取消申请
                </el-button>
                <el-button v-if="application.status === 4" type="primary" size="small" @click="reapply(application)">
                  重新申请
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper" v-if="applications.length > 0">
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="totalApplications">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getAdoptionList, cancelAdoption } from '@/api/adoption-record'
export default {
  name: 'MyApplications',

  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      totalApplications: 0,
      applications: [],
      filterForm: {
        statusFilter: '',
        name: ''
      }
    }
  },

  mounted() {
    this.loadApplications()
  },

  methods: {
    filterApplications() {
      this.loadApplications()
    },
    resetFilter() {
      this.currentPage = 1
      this.filterForm.statusFilter = ''
      this.filterForm.name = ''
      this.loadApplications()
    },
    loadApplications() {
      this.loading = true
      getAdoptionList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        status: this.filterForm.statusFilter,
        name: this.filterForm.name
      }).then(res => {
        if (res.code === 200) {
          this.applications = res.data.rows
          this.totalApplications = res.data.total
          this.loading = false
        }
      }).catch(err => {
        this.$message.error(err.message || '加载申请列表失败')
        this.loading = false
      })
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.loadApplications()
    },
    cancelApplication(application) {
      this.$confirm('确定要取消这个申请吗？', '确认取消', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用API取消申请
        cancelAdoption(application.id).then(res => {
          if (res.code === 200) {
            this.$message.success('申请已取消')
            this.loadApplications()
          }
        })
      }).catch(() => {
        // 用户取消
      })
    },

    reapply(application) {
      this.$router.push(`/pet-detail/${application.pet.id}`)
    },

    getTypeText(type) {
      const typeMap = {
        dog: '狗狗',
        cat: '猫咪',
        other: '其他'
      }
      return typeMap[type] || type
    },

    getAgeText(age) {
      const ageMap = {
        young: '幼年',
        adult: '成年',
        senior: '老年'
      }
      return ageMap[age] || age
    },

    getGenderText(gender) {
      const genderMap = {
        male: '公',
        female: '母'
      }
      return genderMap[gender] || gender
    },

    getStatusText(status) {
      // 1审核中，2待管理员审核，3已通过，4驳回
      const statusMap = {
        1: '审核中',
        2: '待管理员审核',
        3: '已通过',
        4: '初审驳回',
        5: '终审驳回'
      }
      return statusMap[status] || status
    },

    getStatusType(status) {
      const typeMap = {
        1: 'warning',
        2: 'warning',
        3: 'success',
        4: 'danger',
        5: 'danger'
      }
      return typeMap[status] || 'info'
    }
  }
}
</script>

<style scoped>
.my-applications {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px 0;
}


.applications-list {
  margin-bottom: 40px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-state i {
  font-size: 64px;
  color: #ddd;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.empty-state p {
  color: #666;
  margin-bottom: 30px;
}

.application-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.application-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.pet-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.pet-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
}

.pet-details h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 5px;
}

.pet-type {
  color: #666;
  font-size: 14px;
}

.application-info {
  display: grid;
  gap: 15px;
}

.status-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-label {
  font-weight: bold;
  color: #333;
}

.time-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.review-note {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
}

.review-note p:first-child {
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.note-content {
  color: #666;
  line-height: 1.5;
}

.application-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style>